<?php include('header.php'); ?>
<?php include('side.php'); ?>
<div class="layui-body">
	<fieldset class="layui-elem-field layui-field-title" style="margin: 20px 0;">
		<legend><?= Lang::app(['table', 'manage']) ?><span style="color: #BBA;font-size: 14px"></legend>
	</fieldset>
			
	<table id="list" width="100%" class="layui-table" lay-filter="table">
		<thead>
			<tr>
				<th width="7%"><?= Lang::app('no_table') ?></th>
				<th width="8%"><?= Lang::app('in_table') ?></th>
				<th width="70%"><?= Lang::app('users') ?></th>
				<th width="15%"><?= Lang::app('operate') ?></th>
			</tr>
		</thead>
		<tbody>
			<?php $tables = getRows('table'); ?>
			<?php foreach($tables as $table) { ?>
			<tr>
				<td><?= $table['name'] ?></td>
				<td><?= getCount('user', ' and `table_id`=' . $table['id']) ?>/<?= $table['number'] ?></td>
				<td>
					<?php $users = getRows('user', ' and `table_id`=' . $table['id'] . ' order by `status` desc'); ?>
					<?php foreach($users as $user) { ?>
						<span style="display:inline-block;background:<?= $user['status'] == 1 ? '#C30' : '#F60'; ?>;color:#FFF;padding:5px 15px;margin: 5px 5px 5px 0"><?= $user['name']; ?></span>
					<?php } ?>
				</td>
				<td>
					<div class="layui-btn-group">
						<?php if ($table['status'] == 1) { ?>
						<button data-id="<?= $table['id'] ?>" data-name="<?= $table['name'] ?>" data-number="<?= $table['number'] ?>" type="button" class="layui-btn layui-btn-primary layui-btn-sm btn-edit-users" title="<?= Lang::app('btn_table_users') ?>"><i class="layui-icon">&#xe66f;</i></button>
						<button data-id="<?= $table['id'] ?>" type="button" class="layui-btn layui-btn-primary layui-btn-sm btn-close-table" title="<?= Lang::app('btn_table_close') ?>"><i class="layui-icon">&#xe67b;</i></button>
						<?php } elseif ($table['status'] == 0) { ?>
						<button data-id="<?= $table['id'] ?>" type="button" class="layui-btn layui-btn-primary layui-btn-sm btn-open-table" title="<?= Lang::app('btn_table_open') ?>"><i class="layui-icon">&#xe67a;</i></button>
						<?php } ?>
						<button data-id="<?= $table['id'] ?>" type="button" class="layui-btn layui-btn-primary layui-btn-sm btn-edit-table" title="<?= Lang::app('btn_table_edit') ?>"><i class="layui-icon">&#xe642;</i></button>
					  </div>
				</td>
			</tr>
			<?php } ?>
		</tbody>
	</table>
			
</div>

<script>


layui.use('table', function(){
  var table = layui.table;
});

$('.btn-close-table').each(function(i) {
	$(this).bind('click', function() {
		var id=$(this).attr('data-id');
		windos.ajaxPost('/site/save', {table: 'table', id: id, field: 'status', value: 0}, function(res){
			location.reload();
			
		});
	});
});
$('.btn-open-table').each(function(i) {
	$(this).bind('click', function() {
		var id=$(this).attr('data-id');
		windos.ajaxPost('/site/save', {table: 'table', id: id, field: 'status', value: 1}, function(res){
			location.reload();
			
		});
	});
});	

window.table_data = {
	info: [],
	data: [],
	values: []
};

$('.btn-edit-users').each(function(i) {
	var id = $(this).attr('data-id');
	var name = $(this).attr('data-name');
	var number = $(this).attr('data-number');
	$(this).bind('click', function() {
		layui.use(['transfer', 'layer'], function() {
			var transfer = layui.transfer;
			var layer = layui.layer;
			layer.open({
				type: 1,
				offset: 'auto',
				id: 'view',
				area: ['580px', '500px'], //宽高
				shade: 0,
				closeBtn: false,
				btn: ['关闭'],
				btnAlign: 'c',
				title: '管理' + name + '来宾',
				content: '<div id="users" class="layui-transfer" style="margin: 20px 40px"></div>',
				btn1: function() {
					layer.closeAll();
					location.reload();
				},
				success: function(layero) {
					windos.ajaxPost('/site/table_users', {}, function(res){
						getTableUsers();
						cur_number = window.table_data.values.length;
						transfer.render({
							elem: '#users',
							id: 'users',
							data: window.table_data.data,
							value: window.table_data.values,
							title: ['全部来宾', name + '来宾 (' + cur_number + '/' + number + ')'],
							showSearch: true,
							onchange: function(obj, index){
								var table_id = index == 0 ? id : 0;
								var table_data = transfer.getData('users');
								var new_number = table_data.length;
								if (new_number > number) {
									layer.msg('操作失败，所选人数已经超出餐桌限制');
									transfer.reload('users', {data: data,value: values});
									return false;
								} else {
									changeUser(table_id, obj);
									transfer.reload('users', {title: ['全部来宾', name + '来宾 (' + new_number + '/' + number + ')'],data: window.table_data.data,value: window.table_data.values});
								}
								
							}
						});
					});
					
					function changeUser(table_id, data)
					{
						var ids = [];
						for (var i in data) {
							var item = data[i];
							ids.push(item.value);
						}
						var idstr = ids.join(',');
						
						windos.ajaxPost('/site/change_table', {table_id: table_id, user_id: idstr}, function(res) {
							if (res.code == 1) {
								getTableUsers();
								layer.msg('操作成功');
							} else {
								layer.msg('操作失败');
							}
						});
					}
					
					function getTableUsers()
					{
						windos.ajaxPost('/site/table_users', {}, function(res){
							var data = [];
							var values = [];
							for (var i in res) {
								var item = res[i];
								item.title = item.title + ' - ' + item.table_name;
								if (item.table_id == id) {
									item.disabled = false;
									values.push(item.value);
									
								}
								data.push(item);
							}
							window.table_data.data = data;
							window.table_data.values = values;
						});
					}
					
				}
			});
		});
		
		
	});
	
	
});
$('.btn-edit-table').each(function(i) {
	$(this).bind('click', function() {
		var id = $(this).attr('data-id');
		layui.use(['form', 'layer'], function() {
			var form = layui.form;
			var layer = layui.layer;
			layer.open({
				type: 1,
				offset: 'auto',
				id: 'view',
				area: ['480px', '360px'], //宽高
				shade: 0,
				closeBtn: false,
				btn: ['确认修改', '关闭'],
				btnAlign: 'c',
				title: '编辑餐桌',
				content: '<div style="margin: 20px 40px"><form id="table-info" lay-filter="table-info" class="layui-form layui-form-pane" action="" onsubmit="return false;"></form></div>',
				btn1: function() {
					var postData = form.val('table-info');
					windos.ajaxPost('/site/save_table', {data: postData}, function(res){
						if (res.code == 1) {
							layer.closeAll();
							location.reload();
						}
					});
					
				},
				btn2: function() {
					layer.closeAll();
				},
				success: function(layero) {
					
					
					windos.ajaxPost('/site/table_info', {id: id}, function(res){
						
						if (res.code == 1) {
							var data = res.data;
							var formContent = '<input type="hidden" name="id" value="' + data.id + '" />\
							<div class="layui-form-item">\
								<label class="layui-form-label">餐桌名称</label>\
								<div class="layui-input-block">\
								  <input type="text" name="name" lay-verify="name" autocomplete="off" value="' + data.name + '" class="layui-input" />\
								</div>\
							  </div>\
							  <div class="layui-form-item">\
								<label class="layui-form-label">餐桌人数</label>\
								<div class="layui-input-block">\
								  <input type="text" name="number" lay-verify="number" autocomplete="off" value="' + data.number + '" class="layui-input" />\
								</div>\
							  </div>\
							  <div class="layui-form-item">\
								<label class="layui-form-label">餐桌状态</label>\
								<div class="layui-input-block">\
								  <input type="radio" name="status" value="1" title="启用"' + (data.status == 1 ? ' checked' : '') + ' />\
								  <input type="radio" name="status" value="0" title="撤用"' + (data.status == 0 ? ' checked' : '') + ' />\
								</div>\
							  </div>';
							$('#table-info').html(formContent);
							form.render();
						}
						
						//window.table_data.info = res.data;
					});
					
				}
			});
		});
	});
	
});

	
</script>

<?php include('footer.php'); ?>
